<template>
    <div style="width: 50%">
        <el-radio-group v-model="tabPosition" style="margin-bottom: 30px">
            <el-radio-button label="top">top</el-radio-button>
            <el-radio-button label="right">right</el-radio-button>
            <el-radio-button label="bottom">bottom</el-radio-button>
            <el-radio-button label="left">left</el-radio-button>
        </el-radio-group>

        <MgsTabs
            ref="tabs"
            style="height: 300px"
            v-model="activeName"
            :tab-position="tabPosition"
            :tabs="tabs"
            type="border-card"
        >
            <template slot="second">这是第二段内容</template>
            这是默认内容
        </MgsTabs>
    </div>
</template>

<script>
import MgsTabs from '@mgs/components-basic/mgs-tabs';
import Tree from './tree-test';

export default {
    components: { MgsTabs },
    data() {
        return {
            tabPosition: 'left',
            activeName: 'second',
            tabs: [
                {
                    label: '标签一',
                    name: 'first',
                    comp: Tree,
                },
                {
                    label: '标签二',
                    name: 'second',
                    slot: 'second',
                },
                {
                    label: '标签三',
                    name: 'third',
                },
            ],
        };
    },
    mounted() {
        window.tabs = this.$refs.tabs;
    },
};
</script>
